<template>
  <u-popup
    v-model="showPopup"
    mode="bottom"
    safe-area-inset-bottom
    border-radius="22"
  >
    <view class="page-content">
      <view class="page-header flex-y-center flex-x-sb">
        <view> {{$t('submit.list')}}({{$t('order.total1')}}{{ goodList.length }}{{$t('order.total2')}}) </view>
        <text @click="showPopup = false" class="iconfont icon-close"></text>
      </view>
      <scroll-view scroll-y class="goods-list-section">
        <view
          class="item-gooddetails"
          v-for="(good, goodIn) in goodList"
          :key="goodIn"
        >
          <!-- 商品详情 -->
          <GoodsDetail :good="good"></GoodsDetail>
        </view>
      </scroll-view>
    </view>
  </u-popup>
</template>

<script>
import GoodsDetail from "@/components/order-submit/goods-detail.vue";

export default {
  components: {
    GoodsDetail,
  },
  data() {
    return {
      showPopup: false,
    };
  },
  props: {
    goodList: {
      type: Array,
      default: () => {
        return []
      },
    },
  },

  computed: {},

  methods: {
    // 展示弹框
    setShowPayPopup() {
      this.showPopup = !this.showPopup;
    },

    // 跳转至商品详情
    gotoGoodDetail(item) {
      this.$utils.toUrl("/goods/goods/goods?id=" + item.goods_id);
    },
  },
};
</script>

<style lang="scss" scoped>
.page-content {
  display: flex;
  flex-direction: column;

  height: calc(100vh - 400rpx);

  .page-header {
    padding: 0 36rpx;

    height: 108rpx;

    > view {
      font-size: 32rpx;
      font-weight: 600;
      color: #262626;
    }
    .icon-close {
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
      border-radius: 50%;
      background: #f2f1f2;
    }
  }

  .goods-list-section {
    flex: 1;
    width: 100%;
    height: 0;

    .item-gooddetails {
      border-bottom: 1px solid #f2f2f2;
      padding: 0 36rpx;
      &:nth-last-child(1) {
        border-bottom: 0;
      }
    }
  }

  .page-footer {
    font-size: 22rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #949494;
    line-height: 44rpx;
    padding: 24rpx 0 200rpx 0;
    text-align: center;
  }
}

</style>
